<template>
  <div class="index-main">
    <router-view/>
    <!-- <div class="h-120"></div> -->
    <div class="bottom-bar dis-flex p-f t-c">
      <div :class="'flex-1 '+ (menu.active=='index'?'active':'')">
        <router-link to="/" class="dis-block">
          <div class="icon"></div>
          <div class="bar-name">首页</div>
        </router-link>
      </div>
      <div :class="'flex-1 '+ (menu.active=='draw'?'active':'')">
        <router-link to="/draw" class="dis-block">
          <div class="icon"></div>
          <div class="bar-name">开奖</div>
        </router-link>
      </div>
      <div :class="'flex-1 '+ (menu.active=='ranklist'?'active':'')">
        <div class="icon"></div>
        <div class="bar-name">排行</div>
      </div>
      <div :class="'flex-1 '+ (menu.active=='home'?'active':'')">
        <router-link to="/home" class="dis-block">
          <div class="icon"></div>
          <div class="bar-name">我的</div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed: {
      ...mapState({
        menu: state => {return state.menu}
      })
    },
  }
</script>
<style >
  .index-main {height:100%;min-height: 100%;}
  .index-main>.main {
      min-height: inherit;
  }
  .index-main>.main:after{content: " ";display: block;height: 120px;}
</style>